<template>
	<view class="container">
		<u-navbar
			:is-fixed="false"
			:border-bottom="false"
			:is-back="true"
			title="用户管理"
			:background="{ background: 'linear-gradient(90deg, #69b0ff, #e58b8a)' }"
			title-color="#fff"
		>
		</u-navbar>
		<u-toast ref="uToast" />
		<view v-if="!isDetail">
			<view class="menus">
				<view @click="viewDetail(item)" class="menu" v-for="(item, index) in users" :key="index">
					<image class="img" :src="item.avator"></image>
					<view class="name">{{ item.nickname }}</view>
				</view>
			</view>
		</view>
		<view v-if="isDetail" class="detail">
			<u-icon @click="isDetail = false" class="icon" name="arrow-left">返回</u-icon>
			<u-form :model="detailInfo" ref="uForm" :label-width="150">
        <u-form-item label="手机号"
          ><u-input disabled v-model="detailInfo.phone" placeholder="请输入手机号"
        /></u-form-item>
        <u-form-item label="密码">
          <u-input
            v-model="detailInfo.password"
            placeholder="密码"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="昵称"
          ><u-input v-model="detailInfo.nickname" placeholder="请输入昵称"
        /></u-form-item>
        <u-form-item label="头像"
          >
						<view v-if="detailInfo.avator" class="flex-center">
							<image class="img" :src="detailInfo.avator"></image>
							<u-button style="width: 150rpx;" type="error" class="submit" @click="detailInfo.avator = null">修改头像</u-button>
						</view>
          <u-upload v-if="!detailInfo.avator" :maxCount="1" ref="uUpload" :action="action" :file-list="fileList" ></u-upload>
        </u-form-item>
        <u-form-item label="推送"
          ><u-input v-model="detailInfo.notice" placeholder="推送"
        /></u-form-item>
      </u-form>

			<view class="charts" v-if="loaded">
				<qiun-data-charts 
					type="column"
					:opts="opts"
					:chartData="chartDataBMI"
				/>
				<qiun-data-charts 
					type="column"
					:opts="opts"
					:chartData="chartDataPressure"
				/>
				<qiun-data-charts 
					type="column"
					:opts="opts"
					:chartData="chartDataNiao"
				/>
			</view>
      <button class="submit" @click="submit">修改</button>
		</view>
	</view>
</template>

<script>
import moment from "moment";
import { getData, updateUser, getHealth, getPeriod } from '../../api/system/api'
export default {
	data() {
		return {
			typeList: ['养生', '减肥', '营养', '调理'],
			users: [],
			menus: [],
			current: 0,
			isDetail: false,
			action: 'http://127.0.0.1:3000/upload',
			detailInfo: {},
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {
          position: 'top'
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      },
      chartDataBMI: {},
      chartDataPressure: {},
      chartDataNiao: {},
      loaded: false
		}
	},
  onShow() {
    uni.$off('refreshData')
    uni.$once('refreshData', (data) => {
      this.refreshData()
    })
  },
	onTabItemTap() {
		this.current = 0
	},
	mounted() {
		this.refreshData()
	},
	methods: {
		doAdd() {
			this.$u.route('/pages/manage/add')
		},
		refreshData() {
			getData().then(res => {
				this.users = res.data.filter(v => v.phone !== 'admin') || []
				this.users.forEach((v, i) => {
					this.users[i].avator = 'http://127.0.0.1:3000/' + v.avator
				})
			})
		},
		viewDetail(item) {
			this.isDetail = true;
			this.detailInfo = item;
			this.getData()
		},
		submit() {
			console.log(this.detailInfo)
      if (!this.detailInfo.password) {
				this.$refs.uToast.show({
					title: '请输入密码',
					type: 'error',
				})
				return
			}
      if (!this.detailInfo.nickname) {
				this.$refs.uToast.show({
					title: '请输入昵称',
					type: 'error',
				})
				return
			}
			updateUser(this.detailInfo.id, {
				...this.detailInfo,
				avator: this.$refs.uUpload && this.$refs.uUpload.lists.length ? this.$refs.uUpload.lists[0].response.imgName : this.detailInfo.avator.split('/')[3]
			}).then(res => {
				if (res.code === 200) {
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
					})
					this.isDetail = false;
					this.refreshData()
				}
			})
		},
		getData() {
      getHealth({
        date: null,
        userId: this.detailInfo.id
      }).then((res) => {
        this.healthList = res.data.data.sort((a, b) => {
          return moment(a.date).valueOf() - moment(b.date).valueOf();
        });
        let optionBMI = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "BMI",
              data: this.healthList.map(v => v.bmi)
            }
          ]
        };
        this.chartDataBMI = JSON.parse(JSON.stringify(optionBMI));
        
        let optionPressure = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "血压",
              data: this.healthList.map(v => v.pressure)
            }
          ]
        };
        this.chartDataPressure = JSON.parse(JSON.stringify(optionPressure));
        
        
        let optionNiao = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "饮水量/ml",
              data: this.healthList.map(v => v.urine)
            }
          ]
        };
        this.chartDataNiao = JSON.parse(JSON.stringify(optionNiao));

        getPeriod({
          userId: this.detailInfo.id
        }).then((rs) => {
          this.loaded = true
          this.periodList = rs.data.data.sort((a, b) => {
            return moment(a.date).valueOf() - moment(b.date).valueOf();
          });
        });
      });
    }
	}
}
</script>

<style lang="scss" scoped>
.flex-center {
	display: flex;
	align-items: center;
	gap: 30rpx;
	padding: 0 30rpx;

	.tabs {
		width: calc(100% - 150rpx);
	}

	.btn {
		width: 120rpx;
	}
}

.menus {
	padding: 30rpx;
	display: flex;
	flex-wrap: wrap;

	.menu {
		width: 48%;
		padding: 10rpx;
		margin-bottom: 12rpx;

		.img {
			width: 100%;
			height: 200rpx;
		}
		.name {
			text-align: center;
			font-weight: bold;
			margin-top: 20rpx;
			color: orangered;
		}
	}
}


.detail {
	position: relative;
	padding: 60rpx 30rpx;
	.icon {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		z-index: 99;
		font-size: 40rpx;
	}

	.name {
		margin-top: 20rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	.desc {
		color: #999;
		padding: 30rpx;
	}

	.img {
		width: 100%;
		height: 300rpx;
	}
}
.charts {
  padding: 30rpx;
  width: 100%;
}
.chart {
  width: 100%;
  height: 400rpx;
}

</style>
